<template>
    <div  id="xl">
        <!--表头结束-->
        <!--table开始-->

        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/s' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>门诊管理</el-breadcrumb-item>
            <el-breadcrumb-item>挂号管理</el-breadcrumb-item>
        </el-breadcrumb>


      <el-button type="primary" style="margin:20px;" @click="exportExcel">导出Excel</el-button>
      <el-button type="primary" style="margin:20px;" v-print2="'#registrationTableData'">daying</el-button>
        <el-card>
            <!--表头-->
            <el-row>
                <el-col :span="4">
                    <el-input placeholder="请输入门诊号" v-model="eaaOrderNumber"  ></el-input>
                </el-col>

                <el-button  icon="el-icon-search" type="primary" @click="initData2(currPage,pageSize,eaaOrderNumber)"></el-button>
                <!--打印导入导出-->
                <el-button type="primary" @click="openRegistration">增加</el-button>
            </el-row>
            <el-table
                    stripe
                    style="width: 100%"
                    :data="registrationTableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    id="registrationTableData"
            >
                <el-table-column
                        prop="registrationNumber"
                        label="门诊号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="desk.deskName"
                        label="科室"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="patient.patientDataName"
                        label="病人姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="registrationType"
                        label="挂号类型"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="registrationName"
                        label="经办人"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="registrationTime"
                        label="挂号日期"
                        :formatter="dateformat"
                        width="180">
                </el-table-column>
                <el-table-column  label="操作" width="130px">
                    <template #default="{row}">
                        <el-tooltip content="编辑" placement="top">
                            <el-button
                                    icon="el-icon-edit" size="mini"
                                    @click="editEmp(row)"></el-button>
                        </el-tooltip>


                        <el-tooltip content="删除" placement="top">
                            <el-button
                                    icon="el-icon-delete" size="mini"
                                    @click="deleteEmp(row.eId)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <br>
            <!--分页-->
            <div class="fy_div">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 20, 40]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="registrationTableData.length">
                </el-pagination>
            </div>

        </el-card>
        <el-dialog
                title="挂号"
                v-model="dialogVisible"
                width="60%"
                :before-close="handleClose">
            <el-form :model="registration" status-icon  ref="form" label-width="100px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="门诊号" prop="registrationNumber">
                            <el-input v-model="registration.registrationNumber" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10">
                        <el-form-item label="挂号日期" prop="registrationTime">
                            <el-date-picker
                                    v-model="registration.registrationTime"
                                    type="datetime"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10">
                        <el-form-item label="挂号类型" prop="registrationType">
                            <el-select v-model="registration.registrationType" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10">
                        <el-form-item label="科室" prop="room">
                            <el-select v-model="registration.room" placeholder="请选择">
                                <el-option
                                        v-for="item in deskTableData"
                                        :key="item.deskId"
                                        :label="item.deskName"
                                        :value="item.deskId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="经办人" prop="registrationName">
                            <el-input v-model="registration.registrationName"></el-input>
                        </el-form-item>
                    </el-col>

                  <el-col :span="10">
                    <el-form-item label="诊疗卡号" prop="patientDataNumber">
                      <el-input v-model="registration.patient.medicalCardNumber" placeholder="请选择" @click="dialogVisible1 = true" :disabled="submitDisabled1"></el-input>
                    </el-form-item>
                  </el-col>

                    <el-col :span="10">
                        <el-form-item label="病人姓名" prop="patientDataName">
                          <el-input v-model="registration.patient.patientDataName" :disabled="submitDisabled"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10">
                        <el-form-item label="身份证号码" prop="patientDataCard">
                            <el-input v-model="registration.patient.patientDataCard" :disabled="submitDisabled"></el-input>
                        </el-form-item>
                    </el-col>
                  <el-col :span="10">
                    <el-form-item label="病人电话" prop="patientDataPhone">
                      <el-input v-model="registration.patient.patientDataPhone" :disabled="submitDisabled"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="10">
                    <el-form-item label="病人性别" prop="patientDataSex">
                      <el-input v-model="registration.patient.patientDataSex" :disabled="submitDisabled"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
            </el-form>

            <template #footer>
    <span class="dialog-footer">
      <el-button @click="ClearFrom">取 消</el-button>
      <el-button type="primary" @click="saveRegistration">确 定</el-button>
    </span>
            </template>
        </el-dialog>

      <el-dialog
          title="提示"
          v-model="dialogVisible1"
          width="60%"
          :before-close="handleClose">
        <el-form status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-table
              :data="patientTableData"
              style="width: 100%"
              @row-dblclick="openDetails">
            <el-table-column
                prop="medicalCardNumber"
                label="诊疗卡编号">
            </el-table-column>
            <el-table-column
                prop="patientDataName"
                label="病人姓名">
            </el-table-column>
            <el-table-column
                prop="patientDataCard"
                label="病人身份证号">
            </el-table-column>
            <el-table-column
                prop="patientDataPhone"
                label="病人电话">
            </el-table-column>
            <el-table-column
                prop="patientDataSex"
                label="病人性别"
                width="180">
            </el-table-column>
          </el-table>
        </el-form>
        <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogVisible1 = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
    </span>
        </template>
      </el-dialog>


      <el-dialog
          title="提示"
          v-model="dialogVisible2"
          width="30%"
          :before-close="handleClose">
        <span>是否使用诊疗卡</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="openRegistration1">取 消</el-button>
    <el-button type="primary" @click="openRegistration">确 定</el-button>
  </span>
      </el-dialog>
    </div>
</template>

    <script>
    import http, {service} from "@/http/request";
    import qs from "qs";
    import Cookies from 'js-cookie';
    import moment from "moment";
    import htmlToExcel from "../../utils/htmlToExcel";
    import print2 from 'vue3-print-nb'
    export default {
        name: "registrationManager",

          directives:{print2},

        components: {},
        ready(){
          this.submitDisabled = false; //初始化为face表示是可以点击的
          this.submitDisabled1 = false;
        },
        data() {
            return {

              json_fields:{
                "门诊号":"registrationNumber",
                "科室":"desk.deskName",
                "病人":"patient.patientDataName",
                "挂号类型":"registrationType",
                "经办人":"registrationName",
                "时间":"registrationTime",
              },

              json_meta:[
                [{
                  "key":"charset",
                  "value":"utf-8",
                }]
              ],

              submitDisabled:false,//病人输入框是否禁用
              submitDisabled1:false,//诊疗卡号是否禁用
              patientDataId:'',
              patientDataName:'',
              patientDataCard:'',
              value1:'',
              registrationTableData:[],
              list:[],
              deskTableData:[],
              patientTableData:[],

              dialogVisible: false,
              dialogVisible1:false,
              dialogVisible2:false,
              currentPage:1, //初始页
              pageSize:10,    //    每页的数据

                //挂号对象
              registration:{
                registrationId:'',
                registrationNumber:'',
                patientDataId:'',
                room:'',
                doctot:'',
                registrationTime:'',
                registrationFee:'',
                registrationState:'',
                registrationType:'',
                registrationName:'',
                patient:{
                  patientDataId:'',
                  patientDataCard:'',
                  patientDataName:'',
                  patientDataPhone:'',
                  patientDataSex:'',
                  medicalCardNumber:''
                },
                desk:{
                  deskId:'',
                  deskName:'',
                  deskTime:''
                }
              },
              options: [{
                value: '普通',
                label: '普通'
              }, {
                value: '急诊',
                label: '急诊'
              }, {
                value: '专家门诊',
                label: '专家门诊'
              }],
              value:'',
              stateOptions:[{
                registrationState:'0',
                stateLabel:'待就诊'
              },{
                registrationState:'1',
                stateLabel: '待取药',
              },{
                registrationState: '2',
                stateLabel: '待住院',
              },{
                registrationState: '3',
                stateLabel: '待出院',
              }],
              registrationState: '1',
              activeName: 'first',
            }
        },
        //获取折叠计算属性
        computed: {
          showUserName(){
            return Cookies.get('username')
          }
        },
        methods:{

          exportExcel() {
            htmlToExcel.getExcel('#registrationTableData','挂号')
          },

          dateformat(row , column){
            const data = row[column.property]
            if (data == undefined){
              return
            }
            return moment(data).format("yyyy-MM-DD HH:mm:ss")
          },
            initData(){
                service("http://localhost:8088/registration")
                    .then((v) => {
                        this.registrationTableData = v.data;
                    })
            },
            selectDesk(){
              service("http://localhost:8088/select-desk")
              .then((v) =>{
                this.deskTableData = v.data;
              })
            },
            selectPatient(){
              service("http://localhost:8088/select-patient").then((v)=>{
                console.log(v.data)
                this.patientTableData = v.data;
              })
            },

            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },
            editEmp(row){
                this.registration = Object.assign({}, row)
                this.registration.registrationName = this.showUserName
                // this.registration.room = row.desk.deskId
                this.dialogVisible=true;
            },
          openRegistration(){
            this.registration.registrationName = this.showUserName;
            this.registration.registrationNumber= 'MZ'+ this.getProjectNum()+ Math.floor(Math.random() * 10000);
            this.getDataTime();
            this.dialogVisible = true;
            this.submitDisabled = true;
            this.dialogVisible2 = false
          },
          openRegistration1(){
            this.registration.registrationName = this.showUserName;
            this.registration.registrationNumber= 'MZ'+ this.getProjectNum()+ Math.floor(Math.random() * 10000);
            this.getDataTime();
            this.dialogVisible = true;
            this.submitDisabled1 = true;
            this.dialogVisible2 = false
          },
          openDialogVisible2(){
            this.dialogVisible2 = true
          },
          close(){
            this.$refs['form'].resetFields()
            this.registration = this.$options.data().registration
            this.dialogVisible=false;
          },

            ClearFrom(){
              this.close()
              this.submitDisabled1 = false
              this.submitDisabled = false
            },
          openDetails(row){
            this.registration.patient.medicalCardNumber = row.medicalCardNumber
              this.registration.patient.patientDataId = row.patientDataId
            this.registration.patient.patientDataName = row.patientDataName
            this.registration.patient.patientDataCard = row.patientDataCard
            this.registration.patient.patientDataPhone = row.patientDataPhone
            this.registration.patient.patientDataSex = row.patientDataSex
            this.registration.patient.patientDataId = row.patientDataId
            this.dialogVisible1 = false;
          },
            saveRegistration(){
              service.post("http://localhost:8088/save-registration",this.registration)
                    .then((v) => {
                        this.dialogVisible=false;
                        this.submitDisabled1 = false;
                        this.submitDisabled = false;
                        this.$message('操作成功！');
                        this.initData(this.currentPage, this.pageSize);
                    })
            },
            pageChange(p) {
                this.initData(p, this.pageSize)
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
          //默认选中当前时间
          getDataTime(){
              this.registration.registrationTime = new Date();
          },
          // 获取当前日期的方法
          getProjectNum () {
            const projectTime = new Date() // 当前中国标准时间
            const Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
            const Month = projectTime.getMonth() + 1 // 获取中国区月份
            const Day = projectTime.getDate() // 获取几号
            var CurrentDate = Year
            if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
              CurrentDate += Month
            } else {
              CurrentDate += '0' + Month
            }
            if (Day >= 10) {
              CurrentDate += Day
            } else {
              CurrentDate += '0' + Day
            }
            return CurrentDate
          },
        },
        mounted() {
          let that = this;
          that.getDataTime()
        },
        created() {
            this.initData();
            this.selectDesk();
            this.selectPatient();
        },
    }
</script>

<style scoped>
    a {
        text-decoration: none;
    }
    .router-link-active {
        text-decoration: none;
    }

    .el-card{
        margin-top: 50px;

    }
    .block{
        margin-left: 350px;
    }
    .fy_div{
        margin-top:20px;
        margin-left: 450px;
    }
</style>
